<template>
	<view class="bg_color">
		<!-- #ifndef  H5 -->
		<u-navbar back-text="返回" :title="detail.name"></u-navbar>
		<!-- #endif -->
		<view class="u-content">
			<u-parse :html="detail.content"></u-parse>
		</view>
		<view class="flex-col group_9">
			<text class="text_10">其他案例</text>
			<view class="flex-row list">
				<view @click="toDetail(item)" class="list-item flex-col" :key="i" v-for="(item, i) in dcase">
					<image class="image_7" :src="item.image" />
					<text class="text_11">{{item.name}}</text>
					<text class="text_13">{{item.describe}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	var vk;
	export default {
		data() {
			return {
				detail: [],
				dcase: [],
			}
		},
		onLoad(options) {
			that = this;
			vk = that.vk;
			if (!options._id) {
				vk.toast('案例不存在');
				return;
			}
			that.$api.caseDetail({
					_id: options._id
				}).then((res) => {
				if (res.code == 0) {
					that.detail = res.data.detail
					that.dcase = res.data.dcase
				} else {
					vk.toast('网络开小差了~')
				}
			}).catch((err) => {
			})
		},
		methods: {
			toDetail(item) {
				vk.redirectTo('/pages/case-detail/case-detail?_id=' + item._id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-content {
		padding: 30rpx 20rpx;
	}

	.group_9 {
		margin-top: 70rpx;

		.text_10 {
			margin-left: 16rpx;
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;
		}

		.list {
			margin-top: 10rpx;

			.list-item {
				padding: 10rpx 14rpx 10rpx 16rpx;
				flex: 1 1 360rpx;

				.image_7 {
					border-radius: 6rpx;
					filter: drop-shadow(0px 10rpx 10rpx #0000000d);
					width: 330rpx;
					height: 300rpx;
				}

				.text_11 {
					margin-top: 20rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_13 {
					margin-right: 10rpx;
					margin-top: 10rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
				}
			}
		}
	}
</style>
